<!-- 地图 弹窗 -->
<template>
  <div class="contain">
    <el-dialog
      title="建设地点"
      :visible.sync="showMapDialog"
      :before-close="cancel"
      append-to-body
      custom-class="dialog-box"
    >
      <div>
        <draw :key="rowIndex" :initData="rowData" @change="onChange"></draw>
        <div>
          <div>
            建设地点: <el-input v-model="address" placeholder="请填写建设地点名称"></el-input>
          </div>
          <p></p>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Draw from './draw';
const defaultMapCenter = [118.02, 24.48];
function getMapCenter ({longitude, latitude}) {
  if (longitude) return [longitude, latitude];
  return  defaultMapCenter;
}
export default {
  name: "AMapDemo",
  components: {
    Draw,
  },
  props: {
    showMapDialog: {
      type: Boolean,
      default: false,
    },
    rowIndex:{
      type: Number,
      default:undefined
    },
    rowData:{
      type: Object,
      default:()=>{}
    }
  },
  watch:{
    rowIndex(newval,oldval){
      console.log('监听index变化',newval,oldval);
      this.resetToDefault();
    }
  },
  data() {
    return {
      address: '', //建设地点
      layerData: null,
    };
  },
  methods: {
    resetToDefault() {
      this.address = this.rowData.constructionSite;
    },
    /** 取消按钮 */
    cancel() {
      this.$emit("changeShowDialog", 'false'); //调用父组件的自定义事件，并传值
    },
    /** 确定按钮 */
    submitForm() {
      const layerData = this.getLayerData();
      if (layerData === false) {
        return this.$message.error('请绘制一个点位后保存');
      }
      if (!this.address) {
        return this.$message.error('请填写点位的建设名称');
      }
      this.$emit("changeShowDialog", 'false');
      this.rowData.constructionSite = this.address
      this.rowData.longitude = layerData.lng;
      this.rowData.latitude = layerData.lat;
      this.rowData.radius = layerData.radius;
    },
    onResultClick(feature) {
      console.log(feature)
    },
    onChange(data) {
      // : {lat,lng},radius}
      this.layerData = data
      // this.mapData.longitude = data.lng
      // this.mapData.latitude = data.lat
      // this.mapData.radius = data.radius
    },
    getLayerData() {
      if (this.layerData) return this.layerData;
      if (this.rowData.longitude) {
        const { longitude, latitude, radius } = this.rowData;
        return {
          lat: latitude,
          lng: longitude,
          radius: radius,
        };
      }
      return false;
    }
  },
};
</script>

<style lang="scss" scoped>
.amap-demo {
    width: 100%;
    height: 600px;
    position: relative;
  }
 
  .search-box {
    height: 35px;
    margin: 10px auto;
    width: calc(100% - 20px);
    // border-radius:16px;
    box-shadow: none;
    background: #ffff;
    border: 1px solid #e6e6e6;
 
    .search-box-wrapper {
      input {
        background: #fff;
        padding-left: 20px;
      }
 
      .search-btn {
        color: #2A67FE;
        width: 90px;
        height: 20px;
        box-sizing: border-box;
        border-left: 1px solid #D7D7D7;
      }
    }
  }
/* 弹出窗样式 */
.dialog-box {
  width: 1200px;
  height: 800px;
  .el-dialog__body {
    padding: 24px 69px 24px 69px;
    border-top: 1px solid #ebecef;
    border-bottom: 1px solid #ebecef;
    label {
      font-weight: 400 !important;
    }
  }
  .el-dialog__footer {
    padding: 16px 20px;
  }
  .el-dialog__headerbtn {
    background: url("../../../../assets/images/icon_dialog_close.png");
    background-size: 100%;
    width: 16px;
    height: 16px;
    .el-dialog__close {
      visibility: hidden;
    }
  }
}
#draw-map {
  width: 100%;
  height: 400px;
}
</style>
